<template>
    <div id="report">
      <h2 class="reporttitle">墨泥学车软件证书报告</h2>

       <div class="cardBanner">
          <ul>
            <li v-for="(item,index) in cardData" :key="index">
              <viewer :images="cardData">
              <img :src="item.url" alt="">
              </viewer>
              <p>{{item.order}}</p>
            </li>
            <div class="arrow-left" @click="toggleFun(-1)">&lt;</div>
            <div class="arrow-right" @click="toggleFun(1)">&gt;</div>
          </ul>
       </div>
        <!-- footer -->
    <div class="footer-bg">
        <div class="Footer">
        <ul>
            <a href="http://www.beep.cn/" target="_blank"><li>必普网</li></a>
            <a href="http://www.moni.cn/" target="_blank"><li>汽车模拟器</li></a>
            <a href="http://www.moni.cn/" target="_blank"><li>墨泥网</li></a>
            <a href="http://www.moni.cn/" target="_blank"><li>模拟驾驶</li></a>
        </ul>
        <div>备案号：赣ICP备14004824号-1</div>
      </div>
    </div>
    </div>
</template>

<script>
export default {
    name:"report",
    data(){
        return{
            cardData: [{
              url:require(`../../src/assets/image/report/1.jpg`),
              order:"图1-1"
            },
            {
              url:require(`../../src/assets/image/report/2.jpg`),
              order:"图1-2"
            },
            {
              url:require(`../../src/assets/image/report/3.jpg`),
              order:"图1-3"
            },
            {
              url:require(`../../src/assets/image/report/4.jpg`),
              order:"图1-4"
            },
            {
              url:require(`../../src/assets/image/report/5.jpg`),
              order:"图1-5"
            },
            {
              url:require(`../../src/assets/image/report/6.jpg`),
              order:"图1-6"
            },
            {
              url:require(`../../src/assets/image/report/7.jpg`),
              order:"图1-7"
            },
      ]
        }
    },
  methods: {
     toggleFun(p){
				this.cardData = this.cardData.map((item,index,array) => {
					if(index===array.length-1&&p===1){
						item = array[0]
					}
					else if(index===0&&p===-1){
						item = array[array.length-1];
					}else{
						item = array[index+p];
					}
					return item;
				})
			},
  }
    
}
</script>

<style scoped>
#report{
    position: absolute;
    top: 0;
    width: 100%;
    background: url("../assets/image/report/bg.jpg");
    background-size:cover;
    z-index: -1;
}
.reporttitle{
  position: absolute;
  top: 10rem;
  width: 100%;
  text-align: center;
  color: white;
  letter-spacing: 0.2rem;
  font-size: 1.5rem;
}

.cardBanner{
  width: 80%;
	padding: 0 2rem;
  margin: 0 auto;
	position: relative;
  margin-bottom: 3rem;
  margin-top: 15rem;
}
.cardBanner p{
  color: white;
  font-size: 0.8rem;
}
.cardBanner ul{
	display: flex;
	overflow: scroll;    /*设置滚动条*/
}
.cardBanner ul::-webkit-scrollbar{    /*隐藏滚动条*/
	display: none;
}
.cardBanner ul>li{ 
	width: 31.33333%;
	flex-shrink: 0;
	padding-left: 3%;
	text-align: center;
}
.cardBanner ul>li:first-child{
	padding-left: 0;
}
.cardBanner ul>li a{
	display: block;
	width: 100%;
	height: 100%;
}
.cardBanner ul>li img{
	width: 100%;
	/* height: 170px; */
}
.cardBanner ul>li p{
	margin: 0;
}
[class^='arrow']{
	font-size: 2rem;
	transform: scaleX(0.5);
  transform: scaleY(1.5);
	color:white;
}
.arrow-left{
	position: absolute;
	left: -1rem;
	top: calc(50% - 1.5rem);
  cursor: pointer;
}
.arrow-right{
	position: absolute;
	right: -1rem;
	top: calc(50% - 1.5rem);
  cursor: pointer;
}

/* footer */
.footer-bg{
  position: relative;
  height: 10rem;
  background: url("../assets/image/report/footer.png");
  background-size: cover;
}
.Footer{
  position: absolute;
  bottom: 0;
    width: 100%;
    font-size: 0.8rem;
    text-align: center;
    padding-bottom: 1rem;
    border-top: 1px solid white;
    color: white;
}
.Footer ul li{
    list-style: none;
    float: left;
    padding: 0.5rem;
}
.Footer ul{
   display: inline-block;
}
.Footer a{
    text-decoration: none;
    color: white;
}

</style>